<template>
  <div>
    <div class="dy-header">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1">
          <p class="dy-p">年级</p>
          <ul class="dy-ul1" v-show="true">
            <li :class="{dy_active:dy_active==index}" v-for="(item,index) in dy_ji" :key="index" @click="huan(index)">{{item}}</li>
          </ul>
          <p class="dy-p">学科</p>
          <ol class="dy-ol">
            <li v-for="(item,index) in dy_ke" :key="index">{{item}}</li>
          </ol>
          <button class="dy-btn">重置</button>
          <button class="dy-btn1">确定</button>
        </van-dropdown-item>
        <van-dropdown-item v-model="value2" :options="option2" @click="sort(value2)"/>
        <van-dropdown-item v-model="value3" :options="option3" >
          <ul class="dy-ul1">
            <li :class="{dy_active:dy_index==index}" v-for="(item,index) in dy_shuai" :key="index" @click="tog(index)">{{item}}</li>
          </ul>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>

    <div class="dy-content">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell>
          <ul class="dy-ul">
            <li v-for="(item,index) in dy_List" :key="index" @click="toggle(item.id)">
              <p class="dy-p">{{item.title}}</p>
              <div class="dy-div">
                <img src="../../assets/nz.png" alt class="dy-i" />
                <p>{{item.start_play_date | TimeD}}~{{item.end_play_date | TimeD}}</p>|
                <p>共{{item.course_type}}课时</p>
              </div>
              <div class="dy-div1">
                <img :src="item.teachers_list[0].teacher_avatar" alt />
                <p>{{item.teachers_list[0].teacher_name}}</p>
              </div>
              <div class="dy-div2">
                <p>{{item.browse_num}}人已报名</p>
                <p>{{item.price==0?'免费':item.price}}</p>
              </div>
            </li>
          </ul>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
import { Course } from "../../request/http";
import Time from '../../plugin/formate'
export default {
  name: "",
  data() {
    return {
      value1: 0,
      dy_active:0,
      dy_index:0,
      value2: "a",
      value3: "A",
      option1: [{ text: "分类", value: 0 }],
      option2: [
        { text: "排序", value: "a" },
        { text: "综合排序", value: "b" },
        { text: "最新", value: "c" },
        { text: "最热", value: "d" },
        { text: "价格从低到高", value: "e" },
        { text: "价格从高到低", value: "f" }
      ],
      option3: [
        { text: "筛选", value: "A" }
      ],
      // list: [],
      loading: false,
       params: {
        page: 1,
        order_by: 0,
        course_type: 0,
        classify_id: 0
      },
      finished: false,
      dy_List: [],
      dy_ji: ["初一", "初二", "初三", "高一", "高二"],
      dy_ke: ["语文", "数学", "英语", "物理", "化学"],
      dy_shuai:["全部","大班课","小班课","公开课","点播课","面授课","音频课","系统课","图文课","会员课"]
    };
  },
  props: [],
  components: {},
  mounted() {
    this.getList();
  },
  filters:{
    TimeD(v){
      return Time(v)
    }
  },
  methods: {
    getList() {
      Course().then(res => {
        console.log(res);
        this.dy_List = res.list;
      });
      // this.$axios({
      //   url:'https://www.365msmk.com/api/app/courseBasis'
      // }).then(res=>{
      //   console.log(res)
      //   this.dy_List=res.data.data.list
      // })
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 5; i++) {
          this.dy_List.push(this.dy_List.length + 1);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.dy_List.length >= 20) {
          this.finished = true;
        }
      }, 1000);
    },
    toggle(id) {
      this.$router.push({
        path: "/detail",
        query: {
          id: id
        }
      });
    },
    tog(index){
      this.dy_index=index
    },
    huan(index){
      this.dy_active=index
    },
    sort(index){
      console.log(index)
    }
  }
};
</script>

<style scoped>
.dy-p {
  margin-left: 10px;
}
.dy-header {
  position: fixed;
  top: 50px;
  z-index: 100;
  width: 100%;
}
.dy-content {
  margin-top: 100px;
  margin-bottom: 50px;
}
.dy-ul > li {
  width: 103%;
  margin-top: 16px;
  /* margin-left: 8px; */
  background: #fff;
  padding: 10px;
  border-radius: 10px;
  box-sizing: border-box;
}
.dy-ul > li > .dy-p {
  font-size: 17px;
}
.dy-ul > li > .dy-div {
  display: flex;
  align-items: center;
  margin-top: 5px;
}
.dy-ul > li > .dy-div > img {
  width: 15px;
  height: 15px;
}
.dy-ul > li > .dy-div > p {
  margin-left: 5px;
  font-size: 12px;
}
.dy-ul > li > .dy-div > p:nth-of-type(1) {
  margin-right: 10px;
}
.van-cell {
  background: #f0f0f0;
}
.dy-ul > li > .dy-div1 {
  display: flex;
  align-items: center;
  margin: 20px 0;
}
.dy-ul > li > .dy-div1 > img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.dy-ul > li > .dy-div1 > p {
  color: rgba(0, 0, 0, 0.45);
  margin-left: 10px;
  font-size: 12px;
}
.dy-ul > li > .dy-div2 {
  display: flex;
  border-top: 1px solid #f0f0f0;
  padding: 5px 0;
}
.dy-ul > li > .dy-div2 > p {
  margin-top: 5px;
}
.dy-ul > li > .dy-div2 > p:nth-of-type(1) {
  width: 280px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 13px;
}
.dy-ul > li > .dy-div2 > p:nth-of-type(2) {
  font-size: 16px;
  color: #44a426;
}
.dy-ul1 {
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.dy-ul1 > li {
  width: 20%;
  background: #eee;
  text-align: center;
  box-sizing: border-box;
  line-height: 30px;
  height: 30px;
  margin-left: 10px;
  border-radius: 2px;
  margin-top: 5px;
}
.dy-ol {
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.dy-ol > li {
  width: 20%;
  background: #eee;
  text-align: center;
  box-sizing: border-box;
  line-height: 30px;
  height: 30px;
  margin-left: 10px;
  border-radius: 2px;
  margin-top: 5px;
}
.dy-btn {
  width: 45%;
  height: 30px;
  background: transparent;
  border: none;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 10px;
}
.dy-btn1{
  width: 45%;
  height: 30px;
  background: #eb6100;
  color: #fff;
  border: none;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.dy-ul1>.dy_active{
  background: #dabfbf;
  color: #eb6100;
}
</style>